import { BetaSchemaForm, FormInstance } from '@ant-design/pro-components';
import React from 'react';
import { FormType } from './interface';

export interface IFormCommon {
	title: string; // 弹窗的标题
	isOpen: boolean; // 弹窗状态控制
	formColumn: any[]; // modal弹窗form数据
	setIsOpen: any; // 控制状体改变
	formInstance?: FormInstance; // form 实例
	layoutFormType?: FormType; // form 类型
	width?: number; // 宽度
	layout?: 'horizontal' | 'vertical' | 'inline'; // form 布局方式
	onChange: (value: any) => void;
	style?: React.CSSProperties; // 样式控制
	[key: string]: any;
}

const FormCommon: React.FC<IFormCommon> = ({
	title,
	formColumn,
	isOpen,
	setIsOpen,
	style,
	formInstance,
	layoutFormType = 'ModalForm',
	layout = 'horizontal',
	width = 400,
	onChange,
}) => {
	return (
		<>
			<BetaSchemaForm
				style={style}
				form={formInstance}
				title={title}
				layoutType={layoutFormType}
				open={isOpen}
				layout={layout}
				width={width}
				onFinish={async (values) => {
					onChange(values);
				}}
				onOpenChange={setIsOpen}
				columns={formColumn}
			/>
		</>
	);
};

export default FormCommon;
